<template>
  <div class="main-container container-fluid container-limited page-holder">
    <breadcrumb />
    <el-menu mode="horizontal" class="issues deep-color a-link-item" :default-active="active">
      <el-menu-item index="unsolved">
        <router-link :to="`/spaces/${spaceId}/contributions?type=unsolved`">
          待解决
          <span class="m-l-5 item-count">{{ typeResults.unsolved }}</span>
        </router-link>
      </el-menu-item>
      <el-menu-item index="accepted">
        <router-link :to="`/spaces/${spaceId}/contributions?type=accepted`">
          已接受
          <span class="m-l-5 item-count">{{ typeResults.accepted }}</span>
        </router-link>
      </el-menu-item>
      <el-menu-item index="unaccepted">
        <router-link :to="`/spaces/${spaceId}/contributions?type=unaccepted`">
          未接受
          <span class="m-l-5 item-count">{{ typeResults.unaccepted }}</span>
        </router-link>
      </el-menu-item>
      <el-menu-item index="all">
        <router-link :to="`/spaces/${spaceId}/contributions?type=all`">
          全部
          <span class="m-l-5 item-count">{{ typeResults.all }}</span>
        </router-link>
      </el-menu-item>
    </el-menu>
    <contributions-list :items="contributions" :loading="loading" />
    <pagination :current-page="pagination.current" :page-count="pagination.count" />
  </div>
</template>

<script>
import { formatContributions } from '@/views/contributions/format';
import ContributionsList from '@/views/contributions/components/list';

export default {
  name: 'ContributionsIndex', // 贡献列表
  components: {
    ContributionsList,
  },
  data() {
    return {
      loading: false,
      contributions: [],
      pagination: {
        current: null,
        count: null,
      },
      typeResults: { // 每种分类下的数量
        unsolved: 0,
        accepted: 0,
        unaccepted: 0,
        all: 0,
      },
    };
  },
  computed: {
    spaceId() { return this.$route.params.spaceId; },
    active() { return this.$route.query.type || 'unsolved'; },
    loadContributionsParams() {
      return {
        spaceId: this.spaceId,
        type: this.active,
        page: this.$route.query.page || 1,
      };
    },
  },
  created() {
    this.loadContributionsTypeResults();
    this.loadContributions();
  },
  methods: {
    // 加载贡献列表
    loadContributions() {
      this.loading = true;
      this.$api.spaceContributions.index(this.loadContributionsParams)
        .then((res) => {
          this.contributions = formatContributions(res.data);
          this.pagination.current = res.kaminari.current_page;
          this.pagination.count = res.kaminari.total_pages;
        })
        .catch(() => {})
        .then(() => { this.loading = false; });
    },
    // 加载每种贡献分类下的数量
    loadContributionsTypeResults() {
      this.$api.spaceContributions.typeStatistics({ spaceId: this.spaceId })
        .then((res) => {
          Object.assign(this.typeResults, {
            unsolved: res.data.unsolved_count,
            accepted: res.data.accepted_count,
            unaccepted: res.data.unaccepted_count,
            all: res.data.all_count,
          });
        })
        .catch(() => {});
    },
  },
  watch: {
    loadContributionsParams() {
      this.loadContributionsTypeResults();
      this.loadContributions();
    },
  },
};
</script>

<style></style>
